<script setup lang="ts">
  import { queryDictList } from '@/api/system/dict';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import TableLayout from '@/layout/table-layout.vue';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import Detail from './edit.vue';

  const columns = [
    {
      title: 'code',
      dataIndex: 'code',
    },
    {
      title: '字典VALUE',
      dataIndex: 'stateValue',
    },
    {
      title: '字典NAME',
      dataIndex: 'stateLabel',
    },
    {
      title: '排序',
      dataIndex: 'orders',
    },
    {
      title: '备注',
      dataIndex: 'memo',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const pageTable = usePageTable({
    searchForm: {
      state: {
        code: '',
        memo: '',
      },
    },
    table: {
      apiFun: queryDictList,
      columns,
    },
  });

  const editModal = useModeModalHandler({
    onSuccess() {
      pageTable.reload();
    },
  });

  const handleEdit = (record: any) => {
    editModal.showEdit(record);
  };
</script>

<template>
  <div class="col">
    <Detail v-bind="editModal.bindProps" />
    <TableLayout v-bind="pageTable.bindProps">
      <template #searchForm="{ state }">
        <a-form-item field="code" label="CODE" label-col-flex="60px">
          <a-input v-model="state.code" placeholder="请输入CODE" allow-clear />
        </a-form-item>

        <a-form-item field="memo" label="备注" label-col-flex="60px">
          <a-input v-model="state.memo" placeholder="请输入备注" allow-clear />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <ae-button purpose="edit" @click="handleEdit(record)">编辑</ae-button>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
